import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageLoading from '@/components/PageLoading';
import {
  Card,
  Button,
  Icon,
  Modal,
  message,
  Form,
  Input,
  Checkbox,
  Col,
  Row,
  Tag,
  Select,
  Radio,
  InputNumber,
  TimePicker,
  DatePicker,
} from 'antd';
import moment from 'moment';
import styles from './index.less';

const dateFormat = 'YYYY-MM-DD';
const timeFormat = 'HH:mm:ss';
const { Option } = Select;
const { TextArea } = Input;
const { Search } = Input;
const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 20 },
};

class SlotCase extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dictModalShow: false,
      values: [],
      slotIndex: 0,
      itemIndex: 0,
      index: 0,
      slotArr: [],
      slotCoreArr: [],
      idArr: [],
      queryKey: '',
      slotId: '',
      slot: null,
    };
  }

  delCaseItem = index => {
    const { caseArr, upDateCase } = this.props;
    caseArr.splice(index, 1);
    upDateCase(caseArr);
  };

  forMapSlots = (tag, itemIndex, index) => {
    const { dialogSlots } = this.props;
    const OptionElem = dialogSlots.map(this.forMapSlotsOption);

    return (
      <span style={{ marginLeft: 15 }} key={itemIndex}>
        <span className={styles.slotNumber}>{itemIndex + 1}</span>
        <Select
          placeholder="请选择"
          size="small"
          value={tag.slotId ? tag.slotId : 'N'}
          key={itemIndex}
          style={{ width: 120, marginLeft: 5 }}
          onChange={value => this.handleSlotSelectChange(value, itemIndex, index)}
        >
          <Option value="N">选择词槽</Option>
          {OptionElem}
        </Select>
        <Icon
          type="close-circle"
          style={{ marginLeft: 5, cursor: 'pointer' }}
          onClick={() => this.delSlotByIndex(itemIndex, index)}
        />
      </span>
    );
  };

  forMap = (caseItem, index) => {
    const CaseElem = caseItem.caseItemGroups.map((items, itemIndex) =>
      this.forMapItemCase(items, itemIndex, index, caseItem)
    );
    const newIndex = index + 1;
    const tagChild = caseItem.slotIds.map((item, itemIndex) =>
      this.forMapSlots(item, itemIndex, index)
    );
    return (
      <Card
        title={`校验${newIndex}`}
        key={index}
        bordered
        className={styles.caseItem}
        extra={<Icon type="close" onClick={() => this.delCaseItem(index)} />}
      >
        <Row>{CaseElem}</Row>
        <div>
          <Form.Item {...formItemLayout} label="回复话术" style={{ marginBottom: 0 }}>
            <Input
              placeholder="请输入回复话术"
              onChange={e => this.fixInquire(e, index, 'reply')}
              value={caseItem.reply}
              maxLength={100}
            />
          </Form.Item>
          <Form.Item {...formItemLayout} label="词槽处理" style={{ marginBottom: 0 }}>
            <Checkbox
              checked={caseItem.isClear}
              onChange={e => this.fixInquire(e, index, 'isClear')}
            >
              清空词槽
            </Checkbox>
            {caseItem.isClear ? (
              <span>
                {tagChild}
                <Button
                  htmlType="button"
                  type="primary"
                  size="small"
                  onClick={() => this.addSlot(index)}
                  style={{ marginLeft: 10 }}
                >
                  添加
                </Button>
              </span>
            ) : (
              ''
            )}
          </Form.Item>
        </div>
      </Card>
    );
  };

  addSlot = index => {
    const { caseArr } = this.props;
    caseArr[index].slotIds.push({});
    this.upDataByCallBack(caseArr);
  };

  delSlotByIndex = (itemIndex, index) => {
    const { caseArr } = this.props;
    caseArr[index].slotIds.splice(itemIndex, 1);
    this.upDataByCallBack(caseArr);
  };

  handleSlotSelectChange = (val, itemIndex, index) => {
    const { caseArr } = this.props;
    caseArr[index].slotIds[itemIndex].slotId = val;
    this.upDataByCallBack(caseArr);
  };

  forMapItemCase = (items, itemIndex, index, caseItem) => {
    switch (items.itemType) {
      case undefined:
        return (
          <div>
            {items.map((commItem, commItemIndex) =>
              this.forMapCommCase(commItem, commItemIndex, itemIndex, index, items, caseItem)
            )}
            {itemIndex === caseItem.caseItemGroups.length - 1 ? (
              <Button
                htmlType="button"
                type="primary"
                size="small"
                onClick={() => this.addGroupCase(itemIndex, index)}
                className={styles.addGroupItem}
              >
                添加条件组
              </Button>
            ) : (
              ''
            )}
          </div>
        );
      default:
        return this.forMapSpecialCase(items, itemIndex);
    }
  };

  forMapCommCase = (commItem, commItemIndex, itemIndex, index, items, caseItem) => {
    switch (commItem.itemType) {
      case 'slot':
        return this.renderSlotCase(commItem, commItemIndex, itemIndex, index, items, caseItem);
      default:
        return this.renderLogicCase(commItem);
    }
  };

  forMapSpecialCase = (specialItem, specialItemIndex) => {
    return (
      <div key={specialItemIndex}>
        <div className={styles.orItem}>或</div>
      </div>
    );
  };

  renderSlotCase = (slotItem, slotIndex, itemIndex, index, items) => {
    const { dialogSlots } = this.props;
    let OptionElem = null;
    if (dialogSlots.length > 0) {
      OptionElem = dialogSlots.map(this.forMapSlotsOption);
    }
    return (
      <Row key={slotIndex}>
        <Col style={{ marginLeft: 30 }}>
          <Select
            placeholder="请选择"
            value={!slotItem.slotsId ? undefined : slotItem.slotsId}
            className={styles.selectItem}
            onChange={e => this.updataItemCommonData(e, slotIndex, itemIndex, index, 'slotsId')}
          >
            <Option value="">未选择</Option>
            {OptionElem}
          </Select>
          <span className={styles.selectItem}>状态为</span>
          <Select
            placeholder="请选择"
            defaultValue="unfilled"
            value={slotItem.operator}
            className={styles.selectItem}
            style={{ width: 180 }}
            onChange={e => this.updataItemCommonData(e, slotIndex, itemIndex, index, 'operator')}
          >
            <Option value="">未选择</Option>
            <Option value="filled">已填充</Option>
            <Option value="unfilled">未填充</Option>
            <Option value="equal">等于</Option>
            <Option value="not_equal">不等于</Option>
            <Option value="contain">包含</Option>
            <Option value="not_contain">不包含</Option>
            <Option value="great_than">大于(对应数值型词槽)</Option>
            <Option value="less_than">小于(对应数值型词槽)</Option>
            <Option value="great_than_equal">大于等于(对应数值型词槽)</Option>
            <Option value="less_than_equal">小于等于(对应数值型词槽)</Option>
            <Option value="great_than_time">大于(对应时间段型词槽)</Option>
            <Option value="less_than_time">小于(对应时间段型词槽)</Option>
            <Option value="new_than">早于(对应日期时间型词槽)</Option>
            <Option value="old_than">晚于(对应日期时间型词槽)</Option>
          </Select>

          {this.renderInputBySlotItemOperator(
            slotItem,
            slotItem.operator,
            slotIndex,
            itemIndex,
            index
          )}
          {this.renderTimeSelect(slotItem, slotItem.operator1, slotIndex, itemIndex, index)}
          <Icon
            type="close-circle"
            onClick={() => this.delCaseItemByCloseIcon(slotItem, slotIndex, itemIndex, index)}
            style={{ marginLeft: 5, cursor: 'pointer' }}
          />
        </Col>
        <Col style={{ marginLeft: 30 }}>
          {slotIndex === items.length - 1 ? (
            <span
              className={styles.addOneCase}
              onClick={() => this.addOnecase(slotItem, slotIndex, itemIndex, index)}
            >
              {' '}
              <Icon type="plus" />
              添加条件
            </span>
          ) : (
            ''
          )}
        </Col>
      </Row>
    );
  };

  forMapSlotsOption = option => {
    return (
      <Option key={option.slotId} value={option.slotId}>
        #{option.slotName}#
      </Option>
    );
  };

  renderLogicCase = (logicItem, logicIndex) => {
    return (
      <div key={logicIndex} className={styles.andItem}>
        且
      </div>
    );
  };

  addCase = () => {
    const { caseArr } = this.props;
    caseArr.push({
      caseItemGroups: [
        [
          {
            itemType: 'slot',
            operator: 'unfilled',
            slotsId: ' ',
            operator1: ' ',
            time: '',
            time1: '',
            values: [],
          },
        ],
      ],
      method: 'local',
      reply: '',
      isClear: false,
      retryClearSlots: 'true',
      apiId: ' ',
      check: {
        apiFieldName: ' ',
        operator: ' ',
        value: ' ',
      },
      slotIds: [
        {
          slotId: ' ',
        },
      ],
      apiFieldMapping: [
        {
          forItem: ' ',
          apiFieldName: ' ',
          slotId: ' ',
          apiFieldList: [],
        },
      ],
    });
    const { upDateCase } = this.props;
    upDateCase(caseArr);
  };

  upDataByCallBack = res => {
    const { upNewData } = this.props;
    upNewData(res);
  };

  upSelectedData = (res, index) => {
    const { caseArr } = this.props;
    caseArr[index].slotsList = res;
    this.upDataByCallBack(caseArr);
  };

  /*
   * item 当前对象
   * index 当前对象所在数组索引
   * itemIndex 当前数组所在二维数组索引
   * rootIndex 循环根index
   * */
  addOnecase = (item, slotIndex, itemIndex, rootIndex) => {
    const { caseArr } = this.props;
    caseArr[rootIndex].caseItemGroups[itemIndex].push({
      itemType: 'logic',
      value: 'and',
    });
    caseArr[rootIndex].caseItemGroups[itemIndex].push({
      itemType: 'slot',
      operator: 'unfilled',
      slotsId: ' ',
      operator1: ' ',
      time: '',
      time1: '',
      values: [],
    });
    this.upDataByCallBack(caseArr);
  };

  addGroupCase = (itemIndex, rootIndex) => {
    const { caseArr } = this.props;
    caseArr[rootIndex].caseItemGroups.push({
      itemType: 'logic',
      value: 'or',
    });
    caseArr[rootIndex].caseItemGroups.push([
      {
        itemType: 'slot',
        operator: 'unfilled',
        slotsId: ' ',
        operator1: ' ',
        time: '',
        time1: '',
        values: [],
      },
    ]);
    this.upDataByCallBack(caseArr);
  };

  delCaseItemByCloseIcon = (item, slotIndex, itemIndex, rootIndex) => {
    const { caseArr } = this.props;
    if (slotIndex === 0 && itemIndex === 0 && rootIndex === 0) {
      return false;
    }

    if (caseArr[rootIndex].caseItemGroups[itemIndex].length > 1) {
      if (slotIndex === 0) {
        if (caseArr[rootIndex].caseItemGroups[itemIndex][slotIndex + 1].itemType !== undefined) {
          caseArr[rootIndex].caseItemGroups[itemIndex].splice(slotIndex, 1);
          caseArr[rootIndex].caseItemGroups[itemIndex].splice(slotIndex, 1);
        }
      } else if (
        caseArr[rootIndex].caseItemGroups[itemIndex][slotIndex - 1].itemType !== undefined
      ) {
        caseArr[rootIndex].caseItemGroups[itemIndex].splice(slotIndex, 1);
        caseArr[rootIndex].caseItemGroups[itemIndex].splice(slotIndex - 1, 1);
      }
    } else if (caseArr[rootIndex].caseItemGroups[itemIndex - 1].itemType !== undefined) {
      caseArr[rootIndex].caseItemGroups[itemIndex].splice(slotIndex, 1);
      caseArr[rootIndex].caseItemGroups.splice(itemIndex - 1, 1);
    }
    this.upDataByCallBack(caseArr);
  };

  onSlotOnChange = (e, slotItem, slotIndex, itemIndex, index, type) => {
    const { caseArr } = this.props;
    caseArr[index].caseItemGroups[itemIndex][slotIndex][type] = e;
    this.upDataByCallBack(caseArr);
  };

  fixInquire = (val, index, type) => {
    const { caseArr } = this.props;
    if (type === 'isClear') {
      caseArr[index][type] = val.target.checked;
    } else {
      caseArr[index][type] = val.target.value;
    }
    this.upDataByCallBack(caseArr);
  };

  fixRadio = (val, index) => {
    const { caseArr } = this.props;
    caseArr[index].radio = val.target.value;
    this.upDataByCallBack(caseArr);
  };

  forMapOptionItem = (optionsItem, itemIndex, index) => {
    return (
      <Col span={8} gutter={10} key={itemIndex}>
        <span>
          <span className={styles.slotNumber}>{itemIndex + 1}</span>
          <Input
            placeholder=""
            style={{ width: 120 }}
            value={optionsItem}
            defaultValue=""
            onChange={e => this.UpdateOption(e, itemIndex, index)}
          />
          <Icon
            type="close-circle"
            style={{ marginLeft: 5, cursor: 'pointer' }}
            onClick={() => this.delOptionsByIndex(itemIndex, index)}
          />
        </span>
      </Col>
    );
  };

  addOptions = index => {
    const { caseArr } = this.props;
    caseArr[index].options.push('');
    this.upDataByCallBack(caseArr);
  };

  delOptionsByIndex = (itemIndex, index) => {
    const { caseArr } = this.props;
    caseArr[index].options.splice(itemIndex, 1);
    this.upDataByCallBack(caseArr);
  };

  UpdateOption = (e, itemIndex, index) => {
    const { caseArr } = this.props;
    caseArr[index].options[itemIndex] = e.target.value;
    this.upDataByCallBack(caseArr);
  };

  renderInputBySlotItemOperator = (slotItem, type, slotIndex, itemIndex, index) => {
    switch (type) {
      case 'filled':
      case 'unfilled':
        return '';
      case 'equal':
      case 'not_equal':
      case 'contain':
      case 'not_contain':
        let string = '';
        // if (slotItem.isEnum != undefined && slotItem.isEnum != null && !slotItem.isEnum) {
        //   if (slotItem.values.length > 1) {
        //     for (let i of slotItem.values) {
        //       string += i.name + ',';
        //     }
        //   } else if (slotItem.values.length === 1) {
        //     string = slotItem.values[0].name;
        //   }
        // } else {
          if (slotItem.values.length > 0) {
            for (let i of slotItem.values) {
              string += i.name + ',';
            }
          }
        // }

        return (
          <span>
            {/* {slotItem.isEnum != undefined && slotItem.isEnum != null && !slotItem.isEnum ? (
              <Input
                style={{ width: 170 }}
                value={string}
                onChange={e =>
                  this.saveValues(e.target.value, slotIndex, itemIndex, index, 'input')
                }
              />
            ) : (
              <> */}
                <Input
                  style={{ width: 170 }}
                  disabled
                  value={string}
                  onClick={() =>
                    this.showGetDictItemModal(slotItem.values, slotIndex, itemIndex, index)
                  }
                />
                <Icon
                  type="appstore"
                  theme="twoTone"
                  style={{ marginLeft: 5, cursor: 'pointer' }}
                  onClick={() =>
                    this.showGetDictItemModal(
                      slotItem.values,
                      slotIndex,
                      itemIndex,
                      index,
                      slotItem.slotsId
                    )
                  }
                />
              {/* </>
            )} */}
          </span>
        );
      case 'great_than':
      case 'less_than':
      case 'great_than_equal':
      case 'less_than_equal':
        return (
          <span>
            <InputNumber
              min={1}
              max={10}
              value={slotItem.values}
              onChange={e => this.updataItemCommonData(e, slotIndex, itemIndex, index, 'values')}
            />
          </span>
        );
      case 'great_than_time':
      case 'less_than_time':
        return (
          <span>
            <InputNumber
              min={1}
              max={10}
              value={slotItem.values}
              onChange={e => this.updataItemCommonData(e, slotIndex, itemIndex, index, 'values')}
            />
            <Select
              placeholder="请选择"
              value={slotItem.operator1}
              style={{ width: 100, marginLeft: 5, marginRight: 5 }}
              onChange={e => this.updataItemCommonData(e, slotIndex, itemIndex, index, 'operator1')}
            >
              <Option value="N">请选择</Option>
              <Option value="d">天</Option>
              <Option value="w">周</Option>
              <Option value="m">月</Option>
              <Option value="y">年</Option>
              <Option value="h">时</Option>
              <Option value="min">分</Option>
              <Option value="s">秒</Option>
            </Select>
          </span>
        );
      case 'new_than':
      case 'old_than':
        return (
          <span>
            <Select
              placeholder="请选择"
              value={slotItem.operator1}
              style={{ width: 100, marginLeft: 5, marginRight: 5 }}
              onChange={e => this.updataItemCommonData(e, slotIndex, itemIndex, index, 'operator1')}
            >
              <Option value="N">请选择</Option>
              <Option value="J">今天</Option>
              <Option value="Z">昨天</Option>
              <Option value="M">明天</Option>
              <Option value="H">后天</Option>
              <Option value="week">本周</Option>
              <Option value="mon">本月</Option>
              <Option value="date">固定日期</Option>
            </Select>
          </span>
        );
      default:
        return '';
    }
  };

  updataItemCommonData = (e, slotIndex, itemIndex, index, type) => {
    const { caseArr, dialogSlots } = this.props;
    caseArr[index].caseItemGroups[itemIndex][slotIndex][type] = e;
    if (type === 'slotsId') {
      dialogSlots.forEach(item => {
        if (item.slotId == e) {
          caseArr[index].caseItemGroups[itemIndex][slotIndex].isEnum = item.enum;
        }
      });
    }
    if (type === 'operator') {
      caseArr[index].caseItemGroups[itemIndex][slotIndex].operator1 = 'N';
    }
    if (type === 'time1') {
      caseArr[index].caseItemGroups[itemIndex][slotIndex].time = '00:00:00';
    }
    if (type === 'operator1') {
      const caseItem = caseArr[index].caseItemGroups[itemIndex][slotIndex];
      if (caseItem.operator === 'old_than' || caseItem.operator === 'new_than') {
        caseArr[index].caseItemGroups[itemIndex][slotIndex].time = '00:00:00';
      }
    }
    this.upDataByCallBack(caseArr);
  };

  renderTimeSelect = (slotItem, type, slotIndex, itemIndex, index) => {
    switch (type) {
      case 'J':
      case 'Z':
      case 'M':
      case 'H':
        return this.renderTimePicker(slotItem, type, slotIndex, itemIndex, index);
      case 'week':
        return (
          <span>
            <Select
              style={{ width: 100, marginLeft: 5, marginRight: 5 }}
              value={slotItem.time1 === '' ? '' : slotItem.time1}
              onChange={e => this.updataItemCommonData(e, slotIndex, itemIndex, index, 'time1')}
            >
              <Option value="N">请选择</Option>
              <Option value="1">周一</Option>
              <Option value="2">周二</Option>
              <Option value="3">周三</Option>
              <Option value="4">周四</Option>
              <Option value="5">周五</Option>
              <Option value="6">周六</Option>
              <Option value="7">周日</Option>
            </Select>
            {this.renderTimePicker(slotItem, type, slotIndex, itemIndex, index)}
          </span>
        );
      case 'mon':
        return (
          <span>
            <Select
              style={{ width: 100, marginLeft: 5, marginRight: 5 }}
              value={slotItem.time1}
              onChange={e => this.updataItemCommonData(e, slotIndex, itemIndex, index, 'time1')}
            >
              <Option value="N">请选择</Option>
              <Option value="1">1日</Option>
              <Option value="2">2日</Option>
              <Option value="3">3日</Option>
              <Option value="4">4日</Option>
              <Option value="5">5日</Option>
              <Option value="6">6日</Option>
              <Option value="7">7日</Option>
              <Option value="8">8日</Option>
              <Option value="9">9日</Option>
              <Option value="10">10日</Option>
              <Option value="11">11日</Option>
              <Option value="12">12日</Option>
              <Option value="13">13日</Option>
              <Option value="14">14日</Option>
              <Option value="15">15日</Option>
              <Option value="16">16日</Option>
              <Option value="17">17日</Option>
              <Option value="18">18日</Option>
              <Option value="19">19日</Option>
              <Option value="20">20日</Option>
              <Option value="21">21日</Option>
              <Option value="22">22日</Option>
              <Option value="23">23日</Option>
              <Option value="24">24日</Option>
              <Option value="25">25日</Option>
              <Option value="26">26日</Option>
              <Option value="27">27日</Option>
              <Option value="28">28日</Option>
              <Option value="29">29日</Option>
              <Option value="30">30日</Option>
              <Option value="31">31日</Option>
            </Select>
            {this.renderTimePicker(slotItem, type, slotIndex, itemIndex, index)}
          </span>
        );
      case 'date':
        return (
          <span>
            <DatePicker
              style={{ marginLeft: 5 }}
              value={moment(slotItem.time1 === '' ? new Date() : slotItem.time1, dateFormat)}
              onChange={(time, timeString) =>
                this.updataItemCommonData(timeString, slotIndex, itemIndex, index, 'time1')
              }
            />
            {this.renderTimePicker(slotItem, type, slotIndex, itemIndex, index)}
          </span>
        );
      default:
        return '';
    }
  };

  renderTimePicker = (slotItem, type, slotIndex, itemIndex, index) => {
    return (
      <TimePicker
        style={{ marginLeft: 5 }}
        value={moment(slotItem.time === '' ? '00:00:00' : slotItem.time, timeFormat)}
        onChange={(time, timeString) =>
          this.updataItemCommonData(timeString, slotIndex, itemIndex, index, 'time')
        }
      />
    );
  };

  showGetDictItemModal = (values, slotIndex, itemIndex, index, id) => {
    if (id === 'N') {
      return message.info('请选择词槽');
    }
    this.setState(
      {
        dictModalShow: true,
        values,
        slotIndex,
        itemIndex,
        index,
        slotId: id,
      },
      () => {
        this.fetchSlotDetailBySlotId();
      }
    );
  };

  fetchSlotDetailBySlotId = queryKey => {
    const that = this;
    const { dispatch } = that.props;
    const { slotId } = this.state;
    that.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'collectSlot/getSlotInfo',
        payload: { slotId, query: queryKey },
        callback: res => {
          let data = res;
          data.items = res.items ? res.items : [];
          that.setState({
            slotCoreArr: data.items,
            slot: data,
          });
        },
      });
    });
  };

  hideGetDictItemModal = () => {
    this.setState({
      dictModalShow: false,
    });
  };

  modifValues = e => {
    this.setState({
      values: e.target.value,
    });
  };

  fixString = str => {
    var temp = str.split(/[\n\s+,，；;]/g);
    for (var i = 0; i < temp.length; i++) {
      if (temp[i] == '') {
        // 删除数组中空值
        temp.splice(i, 1);
        i--;
      }
    }
    return temp;
  };

  saveValues = (values, slotIndex, itemIndex, index, type) => {
    const { caseArr } = this.props;
    switch (type) {
      case 'save':
        if (typeof values === 'string') {
          let arr = this.fixString(values);
          let resArr = [];
          for (let i of arr) {
            resArr.push({
              id: '',
              name: i,
            });
          }
          caseArr[index].caseItemGroups[itemIndex][slotIndex].values = resArr;
        } else {
          caseArr[index].caseItemGroups[itemIndex][slotIndex].values = values;
        }
        break;

      case 'input':
        caseArr[index].caseItemGroups[itemIndex][slotIndex].values = [
          {
            id: '',
            name: values,
          },
        ];
        break;
    }

    this.upDataByCallBack(caseArr);
    this.hideGetDictItemModal();
  };

  addSlotItem = (id, name) => {
    const { values, idArr } = this.state;
    values.push({
      id,
      name,
    });
    idArr.push(id);

    this.setState({
      values,
      idArr,
    });
  };

  mapSlotArr = (slotItem, slotIndex) => {
    const { idArr, values } = this.state;
    const isExit = values.filter(item => item.name === slotItem.word);
    if (isExit.length > 0) {
      return (
        <Col key={slotIndex} span={8} style={{ marginTop: 10 }}>
          <Button
            htmlType="button"
            type="primary"
            size="small"
            disabled
            onClick={() => this.addSlotItem(slotItem._id, slotItem.word, slotIndex)}
            className={styles.addSlotItem}
          >
            已添加
          </Button>
          {slotItem.word}
        </Col>
      );
    } else {
      return (
        <Col key={slotIndex} span={8} style={{ marginTop: 10 }}>
          <Button
            htmlType="button"
            type="primary"
            size="small"
            onClick={() => this.addSlotItem(slotItem._id, slotItem.word, slotIndex)}
            className={styles.addSlotItem}
          >
            添加
          </Button>
          {slotItem.word}
        </Col>
      );
    }
  };

  delCoreWords = name => {
    const { values, idArr } = this.state;
    // idArr.splice(idArr.indexOf(values[index].id),1);
    // values.splice(index,1);
    console.log(name);
    const newValue = values.filter(item => item.name != name);
    this.setState({
      values: newValue,
      idArr,
    });
  };

  render() {
    const { caseArr } = this.props;
    const CaseChild = caseArr.map(this.forMap);
    const { dictModalShow, slotIndex, itemIndex, index, slotArr, slotCoreArr, slot } = this.state;
    let { values } = this.state;
    const slotEle = slotCoreArr.map(this.mapSlotArr);
    let newName = '';
    if (typeof values == 'object' && slot !== null && !slot.isEnum) {
      if (values.length > 0) {
        for (let i of values) {
          newName += i.name + ',';
        }
      }
    } else {
      newName = values;
    }

    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          {CaseChild}
          <div className={styles.caseItem}>
            <Button
              htmlType="button"
              type="primary"
              size="small"
              onClick={() => this.addCase()}
              className={styles.addCaseItem}
            >
              添加校验
            </Button>
          </div>
          <Modal
            title="词槽值集合"
            visible={dictModalShow}
            onOk={this.hideGetDictItemModal}
            onCancel={this.hideGetDictItemModal}
            onChange={e => this.modifValues(e)}
            footer={[
              <Button
                key="save"
                type="primary"
                onClick={() => this.saveValues(values, slotIndex, itemIndex, index, 'save')}
              >
                保存
              </Button>,
            ]}
          >
            {slot !== null && slot.isEnum ? (
              <div>
                {values.map((tag, index) => {
                  return (
                    <Tag
                      color="magenta"
                      closable
                      onClose={() => this.delCoreWords(tag.name)}
                      key={tag.name}
                    >
                      {tag.name}
                    </Tag>
                  );
                })}
                <Search
                  placeholder=""
                  onSearch={value => this.fetchSlotDetailBySlotId(value)}
                  style={{ width: '100%', marginTop: 10 }}
                />
                <div style={{ padding: 10 }}>
                  <Row gutter={16}>{slotEle}</Row>
                </div>
              </div>
            ) : (
              <TextArea
                rows={4}
                value={newName}
                autosize={{ minRows: 2, maxRows: 16 }}
                onChange={e => this.modifValues(e)}
              />
            )}
          </Modal>
        </Suspense>
      </GridContent>
    );
  }
}
export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(SlotCase));
